<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>电话本☎️</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    li {
      list-style: none;
    }

    .container header {
      background: #266986;
      padding: 15px;
      color: #fff;
      line-height: 50px;
    }

    .contact-list-wrapper {
      background: #7d8392;
      padding: 20px 30px;
    }

    .search-box {
      position: relative;
      margin-bottom: 20px;
    }

    .search-box input {
      width: 100%;
      height: 40px;
      border-radius: 2px;
      border: 0;
      text-indent: 10px;
    }

    #btn-clear {
      position: absolute;
      right: 10px;
      top: 10px;
      display: none;
      cursor: pointer;
    }

    .contact-list li {
      background: #fff;
      margin-bottom: 20px;
      border-radius: 2px;
      padding: 20px;
    }

    .contact-list li p.name {
      margin-bottom: 20px;
    }
  </style>
</head>

<body>
  <div class="container">
    <header>电话薄</header>
    <div class="contact-list-wrapper">
      <div class="search-box">
        <input id="search-input" type="text" placeholder="搜索联系人">
        <span id="btn-clear">X</span>
      </div>
      <ul class="contact-list">
        <!-- <li>
          <p class="name">xxx</p>
          <p class="tel">1234678</p>
        </li>
        <li>
          <p class="name">xxx</p>
          <p class="tel">1234678</p>
        </li> -->
      </ul>
    </div>
  </div>
  <script>
    const contactData = [
      { name: "Amy", tel: "12345678980" },
      { name: "Bob", tel: "12345678981" },
      { name: "Danny", tel: "18539284752" },
      { name: "Jennie", tel: "18539284753" },
    ]

    const contactList = document.querySelector('.contact-list')
    const searchInput = document.querySelector('#search-input')
    const btnClear = document.querySelector('#btn-clear')

    // 1、根据数据初始化页面
    render(contactData)

    let result = []
    searchInput.addEventListener('keyup', (e) => {
      // searchInput.value
      // e.keyCode 

      // 过滤无效按键
      if (e.keyCode >= 48 && e.keyCode <= 57 ||
        e.keyCode >= 65 && e.keyCode <= 90 ||
        e.keyCode === 8
      ) {
        // 筛选新数据
        result = contactData.filter((item) => {
          const reg = new RegExp(searchInput.value, 'i')
          if (item.name.search(reg) != -1 || item.tel.search(reg) != -1) {
            return item
          }
        })

        // 显示新数据
        render(result)

        // 删除按钮的显示隐藏
        if (searchInput.value.trim() === '') {
          btnClear.style.display = 'none'
        } else {
          btnClear.style.display = 'initial'
        }
      }

    }, false)

    btnClear.onclick = function () {
      searchInput.value = ''
      render(contactData)
    }

    function render(arr) {
      // 清空老数据
      contactList.innerHTML = ''
      arr.forEach((item) => {
        contactList.insertAdjacentHTML('beforeend', `
            <li>
              <p class="name">${item.name}</p>
              <p class="tel">${item.tel}</p>
            </li>
          `)
      })
    }


  </script>
</body>

</html>